<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { getMiaoClientDetail, MiaoClient, MiaoInstructCode, SendInstruct } from '../../../api/device'
import dayjs from 'dayjs'

const dialogFormVisible = ref(false)

const activeName = ref('baseInfo')

const title = ref('设备详情')

let clientRow: MiaoClient = {
  deviceID: '',
  mainBoardSerial: '',
  hardDiskSerial: '',
  activeMAC: '',
  IP: '',
  hostname: '',
  createdAt: 0,
  isOverlap: false
}

const clientDetails = ref({
  baseInfo: {}
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
  getMiaoClientDetail(clientRow.deviceID, tab.props.name!.toString()).then(res => {
    console.log(res)
    clientDetails.value.baseInfo = res
  })
}

const showDialog = (client: MiaoClient) => {
  dialogFormVisible.value = true
  console.log(client)
  clientRow = client
  getMiaoClientDetail(clientRow.deviceID, 'baseInfo').then(res => {
    console.log(res)
    clientDetails.value.baseInfo = res
  })
}

const HandleSendInstruct = (code: number, body: any) => {
  console.log(clientRow.deviceID, code, body)
  SendInstruct(clientRow.deviceID, code, body).then(res => {
    console.log(res)
  })
}

defineExpose({
  showDialog
})
</script>
<template>
  <el-dialog v-model="dialogFormVisible" :title="title">
    <el-tabs v-model="activeName" style="height: 600px" tab-position="left" @tab-click="handleClick">
      <el-tab-pane label="基础信息" name="baseInfo">
        <el-descriptions
            border
            column="1"
            title="基础信息"
        >
          <template #extra>
            <el-button type="primary" @click="HandleSendInstruct(MiaoInstructCode.CPU,'')">
              刷新
            </el-button>
          </template>
          <el-descriptions-item label="设备ID">{{ clientDetails.baseInfo.deviceID }}</el-descriptions-item>
          <el-descriptions-item label="主板序列号">{{ clientDetails.baseInfo.mainBoardSerial }}
          </el-descriptions-item>
          <el-descriptions-item label="硬盘序列号">{{ clientDetails.baseInfo.hardDiskSerial }}
          </el-descriptions-item>
          <el-descriptions-item label="活跃网卡">{{ clientDetails.baseInfo.activeMAC }}</el-descriptions-item>
          <el-descriptions-item label="IP地址">{{ clientDetails.baseInfo.IP }}</el-descriptions-item>
          <el-descriptions-item label="主机名">{{ clientDetails.baseInfo.hostname }}</el-descriptions-item>
          <el-descriptions-item label="收录时间">
            {{ dayjs(clientDetails.baseInfo.createdAt * 1000).format('YYYY-MM-DD HH:mm:ss') }}
          </el-descriptions-item>
        </el-descriptions>

      </el-tab-pane>
      <el-tab-pane label="CPU信息">Config</el-tab-pane>
      <el-tab-pane label="主板信息">Role</el-tab-pane>
      <el-tab-pane label="内存信息">Task</el-tab-pane>
      <el-tab-pane label="网卡信息">Task</el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<style scoped>

</style>
